<style scoped>

</style>

<template>
<div>
  <h1>播放器测试</h1>
  <el-button type="text" @click="seeVideo(video.videoSourceId)">预览</el-button>
  <el-dialog
    class="video"
    @close="colseVideo()"
    :visible.sync="playShow"
  >
    <ali-player
      v-if="playAuth"
      :vid="video.videoSourceId"
      :playauth="playAuth"
      qualitySort="asc"
      format="m3u8"
      mediaType="video"
      :encryptType=1
      ref="player"
      :autoplay=false
      :isLive=false
      :rePlay=false
      :preload=true
      controlBarVisibility="hover"
      :useH5Prism=true
    >
    </ali-player>

  </el-dialog>

</div>
</template>

<script>
import VueAliplayer from "../../components/Aliplayer/VueAliplayer.vue";
import {getAuth} from "../../api/ali";

export default {
  components: {"ali-player": VueAliplayer},

  data(){
    return{
      video: {
        id: 0,
        courseId: 0,
        chapterId: 0,
        title: '',
        sort: 0,
        isFree: 0,
        videoSourceId: '8095fbb31ce671efbfeb0675b3ed0102'
      },
      playShow: false,
      // vid: '', //视频vid
      playAuth: '', //鉴权地址
    }
  },
  methods:{
    //打开视频小窗口播放
    seeVideo(vid) {
      getAuth(vid).then(
        res => {
          this.playAuth = res.data.data
          this.vid = vid
          this.playShow = true
        }
      )
    },
    //重新子组件初始化
    colseVideo() {
      console.log("执行初始化")
      //调用组件里的方法，具体什么没有研究，但有初始化组件的作用
      this.$refs.player.initAliplayer()
    },
  },
  // mounted() {
  //   this.seeVideo(this.video.videoSourceId);
  // }
}
</script>
